import { defineStore } from "pinia";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";

// const workSpaceHistoryData = readWorkSpaceHistory()

export interface ITabItem {
    // vue-router 目录
    path: string
    // 标题
    title: string
}

// 打开workSpace后显示在上方的tab列表
export const useTabsStore = defineStore('tabs', () => {
    // tabs数据
    const tabs = ref<ITabItem[]>([
        {
            path: '/workSpace/replace',
            title: '文件模式'
        },
        {
            path: '/workSpace/replace-design',
            title: '设计稿模式'
        },
        {
            path: '/workSpace/design',
            title: '设计稿'
        }
    ])

    // 路由
    const router = useRouter()
    const route = useRoute()

    // console.log('route', route)

    // 被选中的tab
    const activeTabPath = ref<string>(route.path)

    // checkoutTab
    const checkoutTab = (path: string) => {
        activeTabPath.value = path
        router.push(path)
    }


    return {
        tabs,
        activeTabPath,
        checkoutTab,
    }
})